<template>
  <div>
    <el-button type="success" @click="showQType">{{ qtype }}</el-button>
    <el-button type="info" @click="query">查询</el-button>
    <el-button type="info" @click="requery">重置</el-button>
    <el-button type="primary" @click="avisible = true">添加添加</el-button>
  </div>

  <!-- 软件分类选择对话框 -->
  <el-dialog title="选择游戏分类" v-model="stvisinle">
    <Gamepublish @info-change="typeSelected" :mode="'select'"></Gamepublish>
  </el-dialog>

  <!-- 数据显示 -->
  <div>
    <div>
      <!-- {{list}} -->
      <!-- 表格 -->
      <el-table :data="list">
        <el-table-column prop="gname" label="游戏名称" width="100" />
        <el-table-column prop="intro" label="游戏简历" />

        <el-table-column prop="tbGamePublisher.publisher" label="发行商" />
        <el-table-column label="放映时间">
          <template #default="scop">
            {{ Tools.formatDate(scop.row.startTime) }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="showModify(scope.row)"
              >修改</el-button
            >

            <el-button type="danger" size="small" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <PageComp :page="page" @info-change="query"></PageComp>
    </div>
  </div>

  <!-- 添加的对话框 -->
  <el-dialog title="添加游戏" v-model="avisible" @closed="query">
    <div>
      {{ addInfo }}
      <el-form-item label="发行商分类">
        <el-button type="primary" @click="showAddSelector">{{
          addType
        }}</el-button>
      </el-form-item>

      <el-form-item label="游戏名称">
        <el-input v-model="addInfo.gname"></el-input>
      </el-form-item>

      <el-form-item label="游戏简历">
        <el-input v-model="addInfo.intro"></el-input>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="addInfo.created"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期时间"
        />
      </el-form-item>
    </div>

    <template #footer>
      <el-button type="danger" @click="avisible = false">取消</el-button>
      <el-button type="info" @click="resetAdd">重填</el-button>
      <el-button type="success" @click="add">发布</el-button>
    </template>
  </el-dialog>

  <!-- 修改软件分类对话框 -->
  <el-dialog title="修改游戏" v-model="mvisible" @closed="requery">
    <div>
      {{ addInfo }}
      <el-form-item label="发行商分类">
        <el-button type="primary" @click="showAddSelector">{{
          addType
        }}</el-button>
      </el-form-item>

      <el-form-item label="游戏名称">
        <el-input v-model="modifyInfo.gname"></el-input>
      </el-form-item>

      <el-form-item label="游戏简历">
        <el-input v-model="modifyInfo.intro"></el-input>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="modifyInfo.created"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期时间"
        />
      </el-form-item>
    </div>

    <template #footer>
      <el-button type="danger" @click="mvisible = false">取消</el-button>
      <el-button type="success" @click="modify">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { Api } from '../../script/Api';
import { Tools } from '../../script/Tools';
import { ElMessage, ElDialog, ElButton, ElMessageBox } from 'element-plus';
import PageComp from '../../components/PageComp.vue';
import Gamepublish from '../../components/Gamepublishe.vue';

//#region  分类选择相关变量
const stvisinle = ref(false);
const typemode = ref('');

const typeSelected = (info) => {
  if (typemode.value == 'add') {
    addInfo.value.publisher = info.gpid;
    addType.value = info.publisher;
    stvisinle.value = false;
  } else if (typemode.value == 'query') {
    queryInfo.value.publisher = info.gpid;
    qtype.value = info.publisher;
    stvisinle.value = false;
  } else if (typemode.value == 'modify') {
    modifyInfo.value.publisher = info.gpid;
    modifyType.value = info.publisher;
    stvisinle.value = false;
  }
};
//#endregion

//#region 查询
const page = ref({
  pageNumber: 1,
  pageSize: 10,
});

const requery = () => {
  page.value = {
    pageNumber: 1,
    pageSize: 10,
  };

  queryInfo.value = {
    gid: -1,
    gname: '',
    intro: '',
    created: '',
    publisher: '',
  };
  qtype.value = '请选择分类';
  query();
};

const showQType = () => {
  stvisinle.value = true;
  typemode.value = 'query';
};

const queryInfo = ref({
  gid: -1,
  gname: '',
  intro: '',
  created: '',
  publisher: '',
});

const qtype = ref('请选择分类');

const list = ref([]);

const query = () => {
  Api.get(
    `/crud/game/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data) => {
      if (data.success) {
        list.value = data.data.data;
        page.value = data.data.pageBean;
      } else {
        ElMessage.error(data.message);
      }
    }
  );
};

query();
//#endregion

//#region 添加

const addInfo = ref({
  publisher: -1,
  gname: '',
  intro: '',
  created: '',
});

const addType = ref('请选择分类');
const avisible = ref(false);

const resetAdd = () => {
  addInfo.value = {
    publisher: -1,
    gname: '',
    intro: '',
    created: '',
  };
  addType.value = '请选择分类';
};
const add = () => {
  Api.post('/crud/game', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success('添加成功');
      resetAdd();
    } else {
      ElMessage.error(data.message);
    }
  });
};

const showAddSelector = () => {
  stvisinle.value = true;
  typemode.value = 'add';
};

//#endregion

//#region 修改
const modifyType = ref('请选择分类');
const mvisible = ref(false);
const modifyInfo = ref({});
const showModify = (info) => {
  Api.get(`/crud/game/${info.gid}`, {}, (data) => {
    if (data.success) {
      modifyInfo.value = data.data;
      mvisible.value = true;

      // 根据获取的 stid 找到对应的类型名称
    } else {
      ElMessageBox.alert(data.message);
    }
  });
};
const modify = () => {
  Api.put('/crud/game', modifyInfo.value, (data) => {
    if (data.success) {
      ElMessageBox.alert(data.message);
      resetAdd();
    }
  });
};

const showModifySelector = () => {
  stvisinle.value = true;
  typemode.value = 'modify';
};

//#endregion

//#region 删除的部分

const del = (info) => {
  ElMessageBox.confirm(`是否删除：${info.title}`, '删除信息')
    .then(() => {
      console.log('点击了确定');
      Api.delete(`/crud/game/ ${info.gid}`, {}, (data) => {
        if (data.success) {
          ElMessageBox.alert(data.message, '新闻');
          requery();
        } else {
          ElMessageBox.alert(data.message, '新闻');
        }
        requery();
      });
    })
    .catch(() => {
      console.log('点击了取消');
    });
};
//#endregion
</script>

<style scoped></style>
